<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
    <el-button type="primary">添加角色</el-button>
         <el-table  :data="roleList" style="width: 100%" border stripe>
                <!-- 扩展行 -->
    <el-table-column type="expand"> 
            <!-- 获取数据渲染标签 -->
     <template slot-scope="scope">      
         <el-row class="el-bd" :class="i == 0?'el-tb':''" v-for="(item,i) in scope.row.children" :key="item.id">
            <el-col :span="6">
                 <el-tag  @close="removeRightById(scope.row,item.id)" closable >{{item.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                 </el-col>
                    <el-col :span="18">
                        <el-row   v-for="(item2,i) in item.children" :key="item2.id">
                            <el-col :span="8" >
                                <el-tag type="success"  @close="removeRightById(scope.row,item2.id)" closable >{{item2.authName}}</el-tag>
                                 <i class="el-icon-caret-right"></i>
                            </el-col>
                          <el-col :span="16">
                             <el-tag  @close="removeRightById(scope.row,item3.id)" closable type="warning"  v-for="(item3,i) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>                   
                          </el-col>                                
                        </el-row>
                    </el-col>
                   </el-row>
    </template>
     </el-table-column>
    <el-table-column type="index"> </el-table-column>
    <el-table-column label="角色名称" prop="roleName" > </el-table-column>
    <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
    <el-table-column  label="操作"  width="300">
        <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="editRoleData(scope.row)" >编辑</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteRoles(scope.row.id)">删除</el-button>
        <el-button size="mini" type="warning" icon="el-icon-setting" @click="showRightDialogVisible(scope.row)">分配权限</el-button>  
      </template>  
     </el-table-column>
  </el-table>
    </el-card>
    <el-dialog
        title="提示"
        @close="resetKeys"
        :visible.sync="setRightDialogVisible"
        width="50%">
      <el-tree  style="height:500px;overflow-y:scroll" ref="treeId" show-checkbox node-key="id" default-expand-all  :data="rightList" :props="defaultProps" :default-checked-keys="defKeys"></el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="setRightDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setRightSub">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 编辑角色对话框 -->
    <el-dialog
      title="编辑角色"
      :visible.sync="showEditDialogVisible"
      width="50%">
      <el-form :model="editDataForm" :rules="editDataRules" ref="editDataRef" label-width="100px">
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="editDataForm.rolename"></el-input>
        </el-form-item>
          <el-form-item label="角色描述" prop="describe">
          <el-input v-model="editDataForm.describe"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editRoleDiglogVisible">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {

  data () {
    return {
        roleList:[],
        setRightDialogVisible:false,
        showEditDialogVisible:false,
        rightList:[],
        defaultProps:{
            label:'authName',
            children:'children'
        },
        editDataForm :{
           rolename:'',
           describe:'',
           id:0
        },
        editDataRules:{
            rolename:[
                   { required: true, message: '请输入活动名称', trigger: 'blur' },
            ],
            describe:[
               { required: true, message: '请输入活动名称', trigger: 'blur' },
            ]
        },
        defKeys:[],
        roleId:''
    }
  },
  methods: {
    //  发送请求获得数据   tag 权限标签
      async getRoles () {
       const res =  await this.axios.get('roles')
       if(res.meta.status !==200) {
           this.$mg.error(res.meta.msg)
       }
        this.roleList = res.data;
           console.log(this.roleList);
      },
      // 发送请求删除tag标签
      removeRightById (role, rightId) {
          this.$cfm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
      const res =  await this.axios.delete(`roles/${role.id}/rights/${rightId}`)
        if(res.meta.status == 200){
            this.$mg.success(res.meta.msg);
          role.children = res.data
        }
        }).catch(() => {
            this.$mg.info('已经取消删除')       
        });
      },
    //   显示树形结构
     async showRightDialogVisible (row) {
         this.roleId = row.id;
          this.setRightDialogVisible = true;
         const res =  await this.axios.get('rights/tree');
         this.rightList = res.data;
         this.getAllKey(row)
      },
    //  利用递归获得所有默认选中的节点
      getAllKey (row) {
          row.children.forEach(item => {
              if(!item.children){
                  return this.defKeys.push(item.id)
              }
               this.getAllKey(item)
          });
      },
      resetKeys () {
          this.defKeys = [];
      },
    //   更新权限标签
    async  setRightSub (){
        const arr = [...this.$refs.treeId.getHalfCheckedKeys(),...this.$refs.treeId.getCheckedKeys()];
        const id  = arr.join(',');
        const res = await this.axios.post(`roles/${this.roleId}/rights/`,{
            rids:id
        })
        if(res.meta.status !=200){
            this.$mg.error(res.meta.msg);
        }else{
            this.getRoles();
            this.setRightDialogVisible = false;
            this.$mg.success(res.meta.msg)
        }
      },
      // 删除角色
      deleteRoles (id) {
         this.$cfm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
        const res = await this.axios.delete('roles/' +id)
        console.log(res)
        if(res.meta.status==200){
          this.$mg.success(res.meta.msg);
          this.getRoles()
        }
        }).catch(() => {
         this.$mg.error('已经取消删除')
      })
      },
      editRoleData (data) {
          this.showEditDialogVisible =true;
          console.log(data);
            this.editDataForm.rolename = data.roleName;
            this.editDataForm.describe = data.roleDesc
            this.editDataForm.id = data.id
      },
      editRoleDiglogVisible () {
          this.$refs.editDataRef.validate(async falg=>{
            if(!falg) return
            console.log(this.editDataForm.id);
          const res =  await this.axios.put(`roles/${this.editDataForm.id}`,{
             roleName:this.editDataForm.rolename,
             roleDesc:this.editDataForm.describe
           })
         if(res.meta.status!==200) return this.$mg.error(res.meta.msg);
         this.$mg.success('数据修改成功');
         this.getRoles();
         this.showEditDialogVisible =false
          })
      }
  },

  created () {
      this.getRoles()
  }
}
</script>

<style lang='less' scoped>
.el-tag{
    margin: 8px;
    
}
.el-bd {
   border-bottom: 1px solid #ccc; 
   margin-top: -1px;
}
.el-tb{
    border-top: 1px solid #ccc;
    
}
.el-row{
    display: flex;
    align-items: center;
}
</style>
